<template>
  <view class="content">
    <view
      class="flex_row_c_c modalView"
      :class="qrShow ? 'show' : ''"
      @tap="hideQr()"
    >
      <view class="flex_column">
        <view class="backgroundColor-white padding1vh border_radius_10px">
          <a href="javascript:;" style="display: inline-block">
            <image
              :src="poster.finalPath || ''"
              mode="widthFix"
              class="posterImage"
            ></image>
          </a>
        </view>
        <view class="flex_row marginTop2vh">
          <!-- #ifdef H5 -->
          <view class="h5">长按海报保存图片或者使用浏览器分享</view>
          <!-- #endif -->
          <!-- #ifdef APP-PLUS -->
          <button class="button" size="mini" @tap.prevent.stop="saveImage()">
            保存图片
          </button>
          <button class="button" size="mini" @tap.prevent.stop="share()">
            分享商品
          </button>
          <!-- #endif -->
          <!-- #ifdef MP-WEIXIN -->
          <button class="button" size="mini" @tap.prevent.stop="saveImage()">
            保存图片
          </button>
          <button
            class="button"
            open-type="share"
            size="mini"
            id="pic"
            @tap.prevent.stop="uniShare()"
          >
            分享商品
          </button>
          <!-- #endif -->
        </view>
      </view>
    </view>
    <!-- <button type="primary" @tap="shareFc()">生成海报</button> -->
    <view class="hideCanvasView">
      <canvas
        class="hideCanvas"
        canvas-id="default_PosterCanvasId"
        :style="{
          width: (poster.width || 10) + 'px',
          height: (poster.height || 10) + 'px',
        }"
      ></canvas>
    </view>
    <uni-share ref="share"></uni-share>
  </view>
</template>

<script>
import uniShare from "@/mall/components/uni-share/index.vue";
import _app from "@/util/QS-SharePoster/app.js";
import { getSharePoster } from "@/util/QS-SharePoster/QS-SharePoster.js";
export default {
  components: {
    uniShare,
  },
  data() {
    return {
      poster: {},
      qrShow: false,
      canvasId: "default_PosterCanvasId",
      shareInfo: {},
    };
  },
  methods: {
    async shareFc(info) {
      this.shareInfo.href = info.good_url;
      this.shareInfo.title = "皖集采";
      this.shareInfo.desc = info.good_name;
      this.shareInfo.imgUrl = info.good_image;
      console.log(info);
      try {
        // console.log('准备生成:' + new Date())
        const d = await getSharePoster({
          _this: this, //若在组件中使用 必传
          type: "testShareType",
          formData: {
            //访问接口获取背景图携带自定义数据
          },
          background: {
            width: 500,
            height: 760,
            backgroundColor: "#fff",
          },
          posterCanvasId: this.canvasId, //canvasId
          delayTimeScale: 20, //延时系数
          drawArray: ({ bgObj, type, bgScale }) => {
            console.log(this.shareInfo.imgUrl, "ssssssssssssss");
            const dx = bgObj.width * 0.045;
            const fontSize = bgObj.width * 0.06;
            const lineHeight = bgObj.height * 0.04;
            //可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
            return new Promise((rs, rj) => {
              rs([
                {
                  type: "image",
                  url: `${this.picUrl}/jh/login_logo.png`,
                  alpha: 1,
                  dx: 10,
                  dy: 10,
                  infoCallBack(imageInfo) {
                    return {
                      dWidth: imageInfo.width * 0.3,
                      dHeight: imageInfo.height * 0.3,
                    };
                  },
                },
                {
                  type: "text",
                  text: info.good_storeName,
                  size: 22,
                  color: "#000000",
                  alpha: 1,
                  textAlign: "left",
                  textBaseline: "middle",
                  infoCallBack(textLength) {
                    return {
                      dx: 160,
                      dy: 26,
                    };
                  },
                },
                {
                  type: "text",
                  text: info.good_name,
                  size: 20,
                  color: "#000000",
                  alpha: 1,
                  textAlign: "left",
                  textBaseline: "middle",
                  lineFeed: {
                    lineHeight: 22,
                    lineNum: 2,
                    maxWidth: 365,
                  },
                  infoCallBack(textLength) {
                    return {
                      dx: 10,
                      dy: 70,
                    };
                  },
                },
                {
                  type: "image",
                  url: this.shareInfo.imgUrl,
                  alpha: 1,
                  dx: 0,
                  dy: 110,
                  infoCallBack(imageInfo) {
                    return {
                      dWidth: 380,
                      dHeight: 350,
                    };
                  },
                },
                {
                  type: "text",
                  text: info.good_text + ":",
                  size: 24,
                  color: "#000000",
                  alpha: 1,
                  textAlign: "left",
                  textBaseline: "middle",
                  infoCallBack(textLength) {
                    return {
                      dx: 20,
                      dy: 510,
                    };
                  },
                },
                {
                  type: "text",
                  text: "¥ " + info.good_price,
                  size: 29,
                  color: "#ff0000",
                  alpha: 1,
                  textAlign: "left",
                  textBaseline: "middle",
                  infoCallBack(textLength) {
                    return {
                      dx: 110,
                      dy: 510,
                    };
                  },
                },
                {
                  type: "qrcode",
                  text: info.good_url,
                  size: 100,
                  dx: 240 + bgObj.width * 0.02,
                  dy: 465,
                },
              ]);
            });
          },
          setCanvasWH: ({ bgObj, type, bgScale }) => {
            // 为动态设置画布宽高的方法，
            this.poster = bgObj;
          },
        });
        // console.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath)
        this.poster.finalPath = d.poster.tempFilePath;
        this.qrShow = true;
      } catch (e) {
        console.log(e);
        _app.hideLoading();
        _app.showToast(JSON.stringify(e));
      }
    },
    saveImage() {
      // #ifndef H5
      uni.saveImageToPhotosAlbum({
        filePath: this.poster.finalPath,
        success(res) {
          _app.showToast("保存成功");
        },
        fail(err) {
          console.log("调取失败", err);
        },
      });
      // #endif
      // #ifdef H5
      _app.showToast("保存了");
      // #endif
    },
    share() {
      // #ifdef APP-PLUS
      this.$refs.share.shareInfo(this.shareInfo);
      // _app.getShare(false, false, 2, '', '', '', this.poster.finalPath, false, false);
      // #endif

      // #ifndef APP-PLUS
      _app.showToast("分享了");
      // #endif
    },
    //微信分享
    uniShare() {},
    hideQr() {
      this.qrShow = false;
    },
  },
};
</script>

<style>
.h5 {
  position: relative;
  bottom: 38px;
  font-size: 12px;
  left: 46px;
  color: #999999;
}

.button {
  background-color: #e96a1d !important;
  color: #ffffff;
}

.hideCanvasView {
  position: relative;
}

.hideCanvas {
  position: fixed;
  top: -99999upx;
  left: -99999upx;
  z-index: -99999;
}

.flex_row_c_c {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.modalView {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  outline: 0;
  transform: scale(1.2);
  perspective: 2500upx;
  background: rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease-in-out;
  pointer-events: none;
  backface-visibility: hidden;
  z-index: 999;
}

.modalView.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.flex_column {
  display: flex;
  flex-direction: column;
}

.backgroundColor-white {
  background-color: white;
}

.border_radius_10px {
  border-radius: 10px;
}

.padding1vh {
  padding: 1vh;
}

.posterImage {
  width: 75vw;
  -webkit-touch-callout: default;
}

/deep/uni-image > img {
  -webkit-touch-callout: default;
}

.flex_row {
  display: flex;
  flex-direction: row;
}

.marginTop2vh {
  margin-top: 2vh;
}
</style>